<template>
<div style="padding-bottom:50px;">
<div style="position: sticky;top:0;left:0;z-index: 999;overflow: hidden">
  <van-nav-bar
      left-text="返回"
      left-arrow
      title="商品详情"
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="search" size="20" />
    </template>
  </van-nav-bar>
</div>
  <div class="top" v-if="obj.pics.length==0">
    <img style="width: 100%" :src="obj.goods_big_logo==''?'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg':obj.goods_big_logo" alt="">
  </div>
<!--轮播图-->
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item,index) in obj.pics" :key="index" @click="seeImg(index)"><img :src="item.pics_big_url" alt=""></van-swipe-item>
  </van-swipe>
  <!-- 两端对齐 -->
  <div style="color:red">￥{{obj.goods_price}}</div>
  <van-row type="flex" justify="space-between" style="padding:4px 0;border-top:1px #ccc solid;border-bottom:1px #ccc solid">
    <van-col span="20">{{obj.goods_name}}</van-col>
    <van-col span="4"><van-goods-action-icon @click="setDetails" style="border-left:1px silver solid" icon="star" :text="flag?'已收藏':'收藏'" :color="flag?'#ff5000':''" /></van-col>
  </van-row>
  <!--  富文本-->
    <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :goods-id="obj.goods_id"
        :hide-stock="sku.hide_stock"
        @add-cart="setCart"
        @buy-clicked="setShop"
    />
  <!-- 推荐商品列表 -->
  <van-list class="addcar" style="border-bottom: #cccccc 1px solid">
      <div>
        <van-nav-bar title="相关推荐">
        </van-nav-bar>
      </div>
    <van-card v-for="(item,index) in list" :key="item.goods_id"
              @click="setShopId(item,item.goods_id)"
              :num="item.goods_number"
              :price="item.goods_price"
              desc="软件测试数据！"
              :title="item.goods_name"
              :thumb="item.goods_big_logo==''?'http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg':item.goods_big_logo"
    />
  </van-list>
<!--  底部导航  -->
  <div v-html="obj.goods_introduce"></div>
  <van-goods-action safe-area-inset-bottom>
    <van-goods-action-icon icon="chat-o" text="客服"  />
    <van-goods-action-icon icon="cart-o" text="购物车" :badge="Bool.number" @click="GoCart"  />
    <van-goods-action-icon icon="shop-o" text="店铺" />
    <van-goods-action-icon icon="share-o" text="分享" @click="showShare=!showShare" />
    <van-goods-action-button type="warning" text="立即购物" @click="setShow" />
    <van-goods-action-button type="danger" text="立即选择" @click="setShow"  />
  </van-goods-action>
<!-- 分享面板 -->
  <van-share-sheet
      v-model="showShare"
      :options="options"
      title="立即分享给好友"
      :description="obj.goods_name"
  />
</div>
</template>

<script>
import request from "../api/request";
import {Toast,ImagePreview } from "vant";
export default {
  name: "detail",
  data(){
    return{
      list:[],
      showShare:false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link', description: '描述信息' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      ImgList:[],
      obj:'',
      flag:false,
      show: false,
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v:[
              {
                id: '1',
                name: '蓝色',
                imgUrl: 'https://img01.yzcdn.cn/2.jpg',
              }
            ],
            largeImageMode: true, //  是否展示大图模式
          }
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [
            {
              id: 2259, // skuId
              s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
              price: 22000, // 价格（单位分）
              stock_num: 110 // 当前 sku 组合对应的库存
            }
          ],
        price: '220.00', // 默认价格（单位元）
        stock_num: 100, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
      },
      goods: {
        // 默认商品 sku 缩略图
        picture: 'https://img01.yzcdn.cn/2.jpg'
      },

    }
  },
  mounted() {
    this.getdata();
    let id=this.$route.params.id
    request.get('goods/detail',{params:{goods_id:id}}).then(res=>{
      let {message}=res.data
      for(var i=0;i<message.pics.length;i++){
        this.ImgList.push(message.pics[i].pics_big_url)
      }
      this.sku.tree[0].k=message.goods_name;
      this.sku.tree[0].v[0].name=message.goods_name
      this.sku.tree[0].v[0].imgUrl=message.goods_big_logo==''?'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg':message.goods_big_logo;
      this.sku.list[0].id=message.goods_id;
      this.sku.price=message.goods_price;
      this.sku.stock_num=message.goods_number;
      this.sku.list[0].stock_num=message.goods_number;
      this.sku.list[0].price=parseInt(message.goods_price*100);
      this.goods.picture=message.goods_big_logo==''?'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg':message.goods_big_logo;
      this.obj=message;
    })
  },
  computed:{
    Bool(){
      return this.$store.getters["cart/shopAtter"]
    }
  },
  methods:{
    //推荐商品列表
    getdata(){
      request.get('/goods/search').then(res=>{
        let {goods}=res.data.message
        for(var i=0;i<4;i++){
          this.list.push(goods[i])
        }
      })
    },
    //右上角跳转收索页
    onClickRight() {
      this.$router.push('/search')
    },
    //添加图片预览功能
    seeImg(index){
      ImagePreview({
        images:this.ImgList,
        startPosition:index,
      })
    },
    //收藏
    setDetails(){
      this.flag=!this.flag
            if(this.flag){//选中
              //添加收藏
              this.$set(this.obj,'flag',true)
              this.$store.commit('detail/setCollection',this.obj);
              Toast('已添加到收藏夹中！')
              return
            }
      // //取消收藏
      this.$set(this.obj,'flag',false)
      this.$store.commit('detail/setCollection',this.obj);
      Toast('已从收藏夹中移除！')
    },
    onClickLeft(){
      this.$router.back()
    },

    setShow(){
      this.show=true;
    },
    //添加商品
    setCart(obj){
      //判断是否登录
      let token=JSON.parse(sessionStorage.getItem('token'));
        if(token!=null){
          let url = 'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg'
          this.$set(obj, 'img', this.obj.goods_big_logo == '' ? url : this.obj.goods_big_logo)
          this.$set(obj, 'name', this.obj.goods_name)
          this.$set(obj, 'ShopSelect', true)
          Toast('已加入购物车！');
          this.$store.commit('cart/setList', obj)
          return
        }
        this.$router.push('/logoin')
    },
    //立即购买
    setShop(obj){
      let token=JSON.parse(sessionStorage.getItem('token'));
      if(token!=null){
        let url='http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg'
        this.$set(obj,'name',this.obj.goods_name)
        this.$set(obj,'img',this.obj.goods_big_logo==''?url:this.obj.goods_big_logo)
        this.$set(obj,'ShopSelect',true)
        this.$store.commit('cart/setList',obj)
        this.$router.push('/order')
        return
      }
      this.$router.push('/logoin')
    },
    //去往购物车页面
    GoCart(){
      this.$router.push('/car')
    },
  }
}
</script>
<style scoped lang="less">
.shop{font-size:13px}
.van-swipe{
  img{width:100%}
}
</style>